<template>
  <div>
    <p ref="p">msg: {{ msg }}</p>
    <p>msg2: {{ msg2 }}</p>
    <button @click="update">更新msg</button>
  </div>
</template>

<script>
export default {
  name: 'NextTickTest',

  data () {
    return {
      msg: 'abc',  // dep {subs: [userWatcher, renderWatcher]}
      msg2: 'xxx'
    }
  },
  watch: {
    msg (value) {
      console.log('监视到msg变化了', value)
    }
  },
  methods: {
    update () {
      // this.msg2 = 'yyy'  // nexTick(flushQueue)

      // this.$nextTick(() => {
      //   alert(this.msg + '---' + this.$refs.p.innerHTML)
      // })

      this.msg = 'aaa'  // 后面DOM会异步更新
      // alert(this.$refs.p.innerHTML) // 读取得到是旧的DOM
      // 在更新数据后, 调用nextTick, 其回调在DOM更新后执行
      this.$nextTick(() => {
        alert(this.msg + '---' + this.$refs.p.innerHTML)
      })

      // await this.$nextTick()
      // alert(this.msg + '---' + this.$refs.p.innerHTML)
      console.log('-----')
    }
  }
}
</script>

<style scoped>

</style>
